<!DOCTYPE html>
<html>
<head>
	<title>Vue整合Axios</title>
	<meta charset="UTF-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
		#page{
			list-style:none;
		}
		#page li{
			float:left;
			width:30px;
			height:30px;
			text-align:center;
			line-height: 30px;
			cursor:pointer;
			border:1px #ccc solid;
		}
		.select{
			background:#438f0a;
			border:1px #f00 solid;
		}
	</style>
</head>
<body>
	<div id="content">
		<table width="800" border="1">
			<tr>
				<td>编号</td><td>账号</td><td>密码</td><td>姓名</td><td>电话</td><td>地址</td><td>操作</td>
			</tr>
			<tr v-for="user in page.data">
				<td>{{user.userId}}</td>
				<td>{{user.userName}}</td>
				<td>{{user.userPassword}}</td>
				<td>{{user.userRealname}}</td>
				<td>{{user.userTel}}</td>
				<td>{{user.userAddress}}</td>
				<td>
					<button data-toggle="modal" data-target="#myModal" v-on:click="showUser(user)">更新</button>
					<button v-on:click="deleteUser(user.userId)">删除</button>
				</td>
			</tr>
		</table>
		<ul id="page">
			<li v-for="i in page.pageCount" v-on:click="loadUsers(i)" v-bind:class="page.pageNo==i?'select':''">{{i}}</li>
		</ul>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
		  添加用户
		</button>
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">用户信息</h4>
		      </div>
		      <div class="modal-body">
		       	<input id="userId" type="hidden" v-bind:value="user.userId">
		       	<input id="userName" type="text" placeholder="请输入账号" v-bind:value="user.userName"><br>
		       	<input id="userPassword" type="password" placeholder="请输入密码" v-bind:value="user.userPassword"><br>
		       	<input id="userRealname" type="text" placeholder="请输入姓名" v-bind:value="user.userRealname"><br>
		       	<input id="userTel" type="text" placeholder="请输入电话" v-bind:value="user.userTel"><br>
		       	<input id="userAddress" type="text" placeholder="请输入地址" v-bind:value="user.userAddress">
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">关闭</button>
		        <button type="button" class="btn btn-primary" v-on:click="saveUser()">保存</button>
		      </div>
		    </div>
		  </div>
		</div>
	</div>
	<script type="text/javascript">
		//创建Vue对象
		var vue = new Vue({
			el:"#content",
			data:{
				users:{}, 	//用户集合
				user:{},	//用于传参的用户对象
				page:{}		//分页数据
			},
			methods:{
				saveUser:function(){
					//将用户信息赋值给user对象
					this.user = {userId:$("#userId").val(),userName:$("#userName").val(),userPassword:$("#userPassword").val(),userRealname:$("#userRealname").val(),userTel:$("#userTel").val(),userAddress:$("#userAddress").val()};
					//通过userId是否为空判断进行添加或更新
					if(this.user.userId==""){
						//将用户信息发送给后台保存,添加用户
						axios.post("http://localhost:8088/user",this.user)
							.then(value=>{
								if(value.data.msg=="success"){
									alert("添加成功");
									this.loadUsers(1);
								}
							});
					}else{
						//将用户信息发送给后台保存,更新用户
						axios.put("http://localhost:8088/user",this.user)
							.then(value=>{
								if(value.data.msg=="success"){
									alert("更新成功");
									this.loadUsers(1);
								}
							});
					}
					this.user = {}; //把用户设置为空，下次不会显示该用户
					$("#btnClose").click();//关闭模态框
				},
				deleteUser:function(id){
					//使用delete请求删除用户
					axios.delete("http://localhost:8088/user/"+id)
						.then(value=>{
									if(value.data.msg=="success"){
										alert("删除成功");
										this.loadUsers(1);
									}
								});
				},
				//点击更新按钮显示用户
				showUser:function(user){
					this.user = user; //当前点击的用户
				},
				loadUsers:function(pageNo){
					//查询后台分页查询用户
					axios.get("http://localhost:8088/user/page/"+pageNo)
						.then(value => {
							//this指的是当前的vue对象，给vue中的users赋值
							this.page = value.data.data;
						});
				}
			},
			//生命周期函数mounted挂载完毕
			mounted(){
				this.loadUsers(1);
			}
		});
	</script>
</body>
</html>